import React from 'react';
import { Grid } from 'antd-mobile';
import styles from './index.less';

const animateName = [' mergecard-left-up ', ' mergecard-right-up ', ' mergecard-left-down ', ' mergecard-right-down '];

export default class Index extends React.Component {

  componentDidMount(){
    const { close } = this.props;
    window.setTimeout(() => {
      close();
    }, 2000);
  }

  render(){
    const { data } = this.props;
    const renderItem = (el, index) => {
      return (
        <div className={`am-grid-item-inner-content column-num-2 mergecard ${animateName[index]}`}>
          <img alt="" src={el.icon} className="am-grid-icon" />
          {/* <div className="mask"></div> */}
        </div>
      );
    }

    return (
      <div className={styles.mergecard}>
        {/* <div className="am-modal-mask"></div> */}
        <Grid data={data} columnNum={2} hasLine={false}  renderItem={renderItem} />
      </div>
    );
  }

}
